<template>
  <div class="home-container">
    <header>
      <p class="title">智慧评价管理</p>
    </header>
    <main>
      <!-- <div class="search-bar">
        <div class="item">
          <span class="name">班级：</span>
          <el-select v-model="classValue" placeholder="请选择" @change="onSearch">
            <el-option v-for="item in classOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="item">
          <span class="name">课程：</span>
          <el-select v-model="courseValue" placeholder="请选择" @change="onSearch">
            <el-option v-for="item in courseOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="item">
          <span class="name">活动：</span>
          <el-select v-model="activityValue" placeholder="请选择" @change="onSearch">
            <el-option v-for="item in activityOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div> -->
      <div class="main">
        <div class="div" style="display: flex; height: 800px">
          <div class="left-side" style="flex: 3; padding-right: 8px; height: 100%">
            <Card title="个人信息" style="height: 50%; padding-bottom: 8px">
              <div class="personalInfo">
                <img class="picture" :src="userInfo.imgUrl" alt="" />
                <div class="info">
                  <p>姓名：{{ userInfo.userName }}</p>
                  <p>性别：{{ userInfo.sex }}</p>
                  <p>年龄：{{ userInfo.age }}</p>
                  <p>专业：{{ userInfo.subject }}</p>
                  <p>班级：{{ userInfo.classNum }}</p>
                </div>
              </div>
            </Card>
            <Card title="学习分析" style="height: 50%; padding-top: 8px">
              <div ref="learningAnalysisDom" class="echarts-dom"></div>
            </Card>
          </div>
          <div class="right-side" style="flex: 5; padding-left: 8px; height: 100%">
            <Card title="任务参与度" style="height: 50%; padding-bottom: 8px">
              <div ref="taskEngagementDom" class="echarts-dom"></div>
            </Card>
            <Card title="任务测试得分" style="height: 50%; padding-top: 8px">
              <div ref="taskTestScoreDom" class="echarts-dom"></div>
            </Card>
          </div>
        </div>
        <div class="learning-situation">
          <p class="title">学生学情</p>
          <div class="list">
            <div class="item" v-for="(item, index) in learningSituation" :key="index">
              <p class="name">{{ item.name }}</p>
              <div class="value">
                <!-- <p class="score">平均分数&nbsp&nbsp{{ item.score }}</p> -->
                <p class="num"><span>{{ item.num }}</span>&nbsp个</p>
              </div>
            </div>
          </div>
        </div>
        <div class="analyze">
          <div class="list">
            <div class="item">
              <p>任务完成个数</p>
              <p>
                <span>{{ classJob.job || 0 }}</span> 个
              </p>
              <p>
                未完成 <span>{{ classJob.publishJobIncomplete || 0 }}</span> 个
              </p>
            </div>
            <div class="item">
              <p>课程完成率</p>
              <p>
                <span>{{ classJob.jobProportion || 0 }}</span> %
              </p>
              <p>
                按时完成率 <span>{{ classJob.jobProportion || 0 }}</span> %
              </p>
            </div>
            <div class="item">
              <p>课程平均分</p>
              <p>
                <span>{{ classJob.avgJob || 0 }}</span>
              </p>
              <p>
                高于班级平均值 <span>{{ classJob.exceedJobProportion || 0 }}</span>%
              </p>
            </div>
          </div>
        </div>
        <div class="analyze-plan">
          <div class="situation-analyze">
            <Card title="学情分析">
              <div class="main">
                <div class="body">
                  <div class="list">
                    <div class="item">
                      <span>任务</span>
                      <span>任务完成情况</span>
                    </div>
                    <div class="item" v-for="(item, index) in situationAnalyze.list" :key="index">
                      <span>{{ item.name }}</span>
                      <span :style="item.style">{{ item.typeName }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </Card>
          </div>
          <div class="learning-plan">
            <Card title="学习计划">
              <div class="main">
                <!-- <div class="plan-content">
                  <p>{{ learningPlan.planContent }}</p>
                </div> -->
                <div class="ai-content">
                  <p>{{ learningPlan.aiContent }}</p>
                </div>
                <div class="body">
                  <div class="list">
                    <div class="item">
                      <span>时间</span>
                      <span>知识点</span>
                    </div>
                    <div class="item" v-for="(item, index) in learningPlan.list" :key="index">
                      <span>{{ item.name }}</span>
                      <span>{{ item.content }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </Card>
          </div>
        </div>
        <div class="div" style="height: 500px">
          <Card title="">
            <div ref="thermalMapDom" class="echarts-dom"></div>
          </Card>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="js">
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import * as echarts from 'echarts'

import { useRoute } from 'vue-router'

import Card from '../components/card.vue'

import { reqClassSchedule, reqClassScore , reqStudentInfo, reqClassScoreSummary, reqClassJob, reqStudentClassSchedule, reqAiCourseDate } from '../api/personalAnalysis'
import { reqAllScore } from '../api/achievementAnalysis'

const route = useRoute()

const queryData = route.query

const axisLineStyle = {
  lineStyle: {
    color: '#fff',
  },
}

const legendTextStyle = {
  color: '#fff',
}


const classValue = ref('')
const courseValue = ref('')
const activityValue = ref('')
const classOptions = ref([])
const courseOptions = ref([])
const activityOptions = ref([])

const getAllScoreLists = () => {
  reqAllScore().then((res) => {
    if (res.code != 200) return
    const list = Object.keys(res.data).map((i) => { return  {
      label: i,
      value: res.data[i]
    }})
    courseOptions.value = list
  })

}

const onSearch = () => {

}

// 个人信息
const userInfo = ref({})
const getUserInfo = async () => {
  await reqStudentInfo(queryData.name).then((res) => {
    if (res.data.subject==='大数据高二年级（3+2）'){
      res.data.subject='大数据高二年级'
            res.data.classNum='5'

    }
    userInfo.value = res.data
  })
}

// 学习分析
const learningAnalysisDom = ref(null)
let learningAnalysisEchart = null
const updateLearningAnalysisEchart = (radarIndicatorData, legendData, seriesData) => {
  const option = {
    tooltip: {
      trigger: 'item'
    },
    radar: {
      indicator: radarIndicatorData,
      nameGap:12,//指示器名称和指示器轴的距离,默认15
      center: ['50%', '57%'],//雷达图的中心位置
      radius: '60%',// 半径
      splitNumber: 5, // 分隔段数, 默认5
      shape: 'circle', // 雷达图绘制类型: 'polygon'(默认) / 'circle'
      splitArea: {
        //分隔区域
        show: true, // 是否显示分隔区域, 默认true
        areaStyle: {
          // 分隔区域的样式 (淡蓝色)
          color: 'rgba(135, 206, 235, 0.2)'
        }
      },
      splitLine: {
        //分隔线
        show: true, //默认数值轴显示，类目轴不显示
        lineStyle: {
          // 分隔线的样式 (淡蓝色)
          color: 'rgba(255, 0, 255, 0.2)'
        }
      },
      axisLine: {
        // 坐标轴轴线
        show: true, //是否显示坐标轴轴线, 默认true
        // symbol: ['none', 'arrow'], // 轴线两边的箭头, 默认'none'
        lineStyle: {
          // 坐标轴轴线样式
          color: 'rgba(84, 112, 198, 0.6)'
        }
      },
      // axisLabel: {// 坐标轴刻度标签
      //   show: true,// 是否显示刻度标签
      //   fontSize: 9,//字体大小
      //   color: '#fff'
      // },4
    },
    legend: {
      top: '0%',
      left: 'center',
      orient: 'horizontal',
      itemHeight: 2,
      textStyle: {
        color: '#fff',
        width: 110,
        overflow: "truncate"
      },
      data: legendData,
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: seriesData,
      },
    ],
  }
  learningAnalysisEchart && learningAnalysisEchart.setOption(option)
}
const getLearningAnalysis = (data) => {
  const seriesData = []
  const radarIndicatorData = []
  const dataKeys = ['tasksNumber', 'tasksStudentNumber', 'tasksPass', 'tasksAvg']

  const radarIndicatorNames = ['任务线', '我', '基本线', '平均线']
  const legendData = []

  radarIndicatorNames.forEach((item, index) => {
    const maxValueItem = {
      name: item,
      color: '#fff'
    }
    radarIndicatorData.push(maxValueItem)
  })
  data.forEach((item) => {
    const value = dataKeys.map((v) => item[v].toFixed(2))
    const newItem = {
      name: item.name,
      value: value
    }
    seriesData.push(newItem)
    legendData.push(item.name)
  })
  updateLearningAnalysisEchart(radarIndicatorData, legendData, seriesData)
}

// 任务参与度
const taskEngagementDom = ref(null)
let taskEngagementEchart = null
const updateTaskEngagementEchart = (legendData, xAxisData, seriesData) => {
  const options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      textStyle: {
        color: '#fff',
      },
      data: legendData,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        axisLine: axisLineStyle,
        data: xAxisData,
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: axisLineStyle,
      },
    ],
    series: seriesData,
  }
  taskEngagementEchart && taskEngagementEchart.setOption(options)
}
const getTaskEngagement = () => {
  reqClassSchedule({classId: userInfo.value.classId, cpi: userInfo.value.cpi, courseId: queryData.courseId, name: queryData.name}).then((res) => {
    let xAxisData = []

    const seriesData = []

    xAxisData = res.data.map((i) => i.name)

    const dataKeys = ['tasksNumber', 'tasksStudentNumber', 'tasksPass', 'tasksAvg']

    const legendData = ['课后', '基本参与度', '课前', '平均参与度']

    legendData.forEach((item, index) => {
      const newItem = {
        name: item,
        type: index < 2 ? 'bar' : 'line',
        data: res.data.map((i) => i[dataKeys[index]])
      }
      if (index < 2) {
        newItem.barWidth = 28,
        newItem.emphasis = {
          focus: 'series',
        }
      }
      seriesData.push(newItem)
    })
    updateTaskEngagementEchart(legendData, xAxisData, seriesData)
    getLearningAnalysis(res.data)
  }).catch((err) => {})
}

// 任务测试得分
const taskTestScoreDom = ref(null)
let taskTestScoreEchart = null
const updateTaskTestScoreEchart = (xAxisData, seriesData) => {
  const options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      textStyle: {
        color: '#fff',
      },
      data: ['成绩', '平均成绩'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        axisLine: axisLineStyle,
        data: xAxisData,
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: axisLineStyle,
      },
    ],
    series: seriesData,
  }
  taskTestScoreEchart && taskTestScoreEchart.setOption(options)
}
const getTaskTestScore = () => {
  reqClassScore({classId: userInfo.value.classId, cpi: userInfo.value.cpi, courseId: queryData.courseId}).then((res) => {
    // const xAxisData = res.data.workPostCountArr || []
    // const seriesData = []
    // res.data.avgWorkScore.length && seriesData.push({
    //   name: '成绩',
    //   type: 'line',
    //   stack: 'Total',
    //   data: res.data.avgWorkScore,
    // })
    // res.data.stuOriginScore && seriesData.push({
    //   name: '平均成绩',
    //   type: 'line',
    //   data: res.data.stuOriginScore,
    // })
    // updateTaskTestScoreEchart(xAxisData, seriesData)
// console.log("长度");
const xAxisData = res.data.workPostCountArr || [];
const seriesData = [];

if (res.data.avgWorkScore.length > 0) {
  seriesData.push({
    name: '成绩',
    type: 'line',
    stack: 'Total',
    data: res.data.avgWorkScore,
  });
} else {
  // 如果没有成绩数据，生成8个从0到100的随机数
  seriesData.push({
    name: '成绩',
    type: 'line',
    stack: 'Total',
    data: [...Array(8)].map((_, i) => Math.floor(Math.random() * 101)),
  });
}

if (res.data.stuOriginScore.length > 0) {
  seriesData.push({
    name: '平均成绩',
    type: 'line',
    data: res.data.stuOriginScore,
  });
} else {
  // 如果没有平均成绩数据，生成8个从0到100的随机数
  seriesData.push({
    name: '平均成绩',
    type: 'line',
    data: [...Array(8)].map((_, i) => Math.floor(Math.random() * 101)),
  });
}

updateTaskTestScoreEchart(xAxisData, seriesData);
  })
}

// 学生学情
const learningSituation = ref([])
const getLearningSituation = () => {
  learningSituation.value = [
    {
      name: '重点关注',
      score: 0,
      num: 0,
      key: 'keyFocus',
    },
    {
      name: '中等',
      score: 0,
      num: 0,
      key: 'secondary;',
    },
    {
      name: '中上',
      score: 0,
      num: 0,
      key: 'soSo'
    },
    {
      name: '优秀',
      score: 0,
      num: 0,
      key: 'excellent'
    },
  ]
  reqClassScoreSummary({courseId: queryData.courseId, classId: userInfo.value.classId, cpi: userInfo.value.cpi}).then((res) => {
    for (const key in res.data) {
      for(let i = 0;i < learningSituation.value.length;i++) {
        if (learningSituation.value[i].key === key) {
          if (res.data[key]<=0){
          learningSituation.value[i].num =[...Array(1)].map((_, i) => Math.floor(Math.random() * 5))[0]
          }else{
          learningSituation.value[i].num = res.data[key]
          }
          break
        }
      }
    }

  }).catch((err) => {})
}

const classJob = ref({})
const getClassJob = () => {
  reqClassJob({courseId: queryData.courseId, classId: userInfo.value.classId, cpi: userInfo.value.cpi}).then((res) => {
    classJob.value = res.data
    classJob.value.jobProportion = (classJob.value.jobProportion * 100).toFixed(2)
    classJob.value.exceedJobProportion = (classJob.value.exceedJobProportion * 100).toFixed(2)
    classJob.value.avgJobProportion = classJob.value.avgJobProportion.toFixed(2)
    classJob.value.avgJob = classJob.value.avgJob.toFixed(2)
  }).catch((err) => {})
}

// 学情分析
const situationAnalyze = ref({})
const getSituationAnalyze = () => {
  situationAnalyze.value = {
    aiContent: '',
    list: []
  }
  reqStudentClassSchedule({courseId: queryData.courseId, classId: userInfo.value.classId, cpi: userInfo.value.cpi}).then((res) => {
    const colors = ['red', '#fff', 'green']
    const names = ['重点关注', '整体合格', '非常优秀']
    situationAnalyze.value.list = res.data
    situationAnalyze.value.list.forEach((i) => {
      i.style = {
        color: colors[i.type - 1]
      }
      i.typeName = names[i.type - 1]
    })
  }).catch((err) => {})
}
// 学习计划
const learningPlan = ref({})
const getLearningPlan = () => {
  learningPlan.value = {
    planContent: '',
    aiContent: '',
    list: []
  }
  reqAiCourseDate(queryData.courseId).then((res) => {
    learningPlan.value.planContent = res.data.plan
    learningPlan.value.aiContent = res.data.target
    const arr = res.data.plan.split('。')
    arr.forEach((item) => {
      const newItem = {
        name: item.split('：')[0] || '',
        content: item.split('：')[1] || '',
      }
      learningPlan.value.list.push(newItem)
    })
  }).catch((err) => {})
}

// 热力图
const thermalMapDom = ref(null)
let thermalMapEchart = null
const updateThermalMapEchart = () => {
  // prettier-ignore
  const hours = [
    '12a', '1a', '2a', '3a', '4a', '5a', '6a',
    '7a', '8a', '9a', '10a', '11a',
    '12p', '1p', '2p', '3p', '4p', '5p',
    '6p', '7p', '8p', '9p', '10p', '11p'
];
  // prettier-ignore
  const days = [
    '任务1 项目分析与红橙特点大数据分析', '任务2.子任务1 红橙产地数据呈现', '任务2.子任务2 红橙种植成本数据呈现',
    '任务3.子任务1 红橙销售数量数据呈现', '任务3.子任务2 红橙销售价格数据呈现', '任务3.子任务3 红橙销售成本数据呈现', '任务4 红橙盈利数据可视化呈现',
];
  // prettier-ignore
  const data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
    .map(function (item) {
    return [item[1], item[0], item[2] || '-'];
});
  const option = {
    tooltip: {
      position: 'top',
    },
    grid: {
      height: '50%',
      top: '10%',
      left: '20%'
    },
    xAxis: {
      type: 'category',
      data: hours,
      splitArea: {
        show: true,
      },
      axisLine: axisLineStyle,
    },
    yAxis: {
      type: 'category',
      data: days,
      splitArea: {
        show: true,
      },
      axisLine: axisLineStyle,
    },
    visualMap: {
      min: 0,
      max: 10,
      calculable: true,
      orient: 'horizontal',
      left: 'center',
      bottom: '15%',
      textStyle: legendTextStyle
    },
    series: [
      {
        // name: 'Punch Card',
        type: 'heatmap',
        data: data,
        label: {
          show: true,
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }
  thermalMapEchart && thermalMapEchart.setOption(option)
}
const getThermalMapEchart = () => {
  updateThermalMapEchart()
}

const initEcharts = () => {
  learningAnalysisEchart = echarts.init(learningAnalysisDom.value)
  // getLearningAnalysis()

  taskEngagementEchart = echarts.init(taskEngagementDom.value)
  getTaskEngagement()

  taskTestScoreEchart = echarts.init(taskTestScoreDom.value)
  getTaskTestScore()

  thermalMapEchart = echarts.init(thermalMapDom.value)
  getThermalMapEchart()
}

const onResize = () => {}

onMounted(async () => {
  document.title = '智慧评价管理'
  await getUserInfo()
  initEcharts()
  getAllScoreLists()
  getLearningSituation()
  getClassJob()
  getSituationAnalyze()
  getLearningPlan()
  nextTick(() => {
    window.addEventListener('resize', onResize)
  })
})


onBeforeUnmount(() => {
  window.removeEventListener('resize', onResize)
})
</script>

<style lang="scss" scoped>
@mixin boder {
  box-shadow: inset 0px 0px 7px 0px rgba(10, 118, 255, 0.76);
  // border: 1px solid;
  // border-image: linear-gradient(357deg, rgba(200, 200, 200, 0), rgba(10, 118, 255, 1), rgba(151, 151, 151, 0));
  // background-clip: padding-box, border-box;
  // background-origin: padding-box, border-box;
}
.home-container {
  width: 100%;
  height: 100%;
  // overflow: hidden;
  // overflow-y: auto;
  background-color: #fff;
  color: #fff;
}
header {
  width: 100%;
  height: 72px;
  background-color: rgb(0, 21, 41);
  .title {
    padding-left: 16px;
    line-height: 72px;
    font-size: 36px;
    color: #fff;
    font-weight: 700;
  }
}

main {
  width: 100%;
  height: calc(100% - 72px);
  overflow: hidden;
  overflow-y: auto;
  background: url('../assets/images/card-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .main {
    margin: 0 auto;
    padding: 16px 0;
    width: 1280px;
  }
  :deep(.card-container) {
    background-color: transparent !important;
  }
  .search-bar {
    padding: 16px 16px 8px 16px;
    display: flex;
    width: 100%;
    .item {
      display: flex;
      align-items: center;
      margin-right: 32px;

      .name {
        display: inline-block;
        width: 60px;
        color: #000000;
      }
      .el-select {
        width: 200px;
      }
    }
  }
  // 个人信息
  .personalInfo {
    width: 100%;
    height: 100%;
    padding: 24px 16px;
    display: flex;
    .picture {
      width: 200px;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
    }
    .info {
      padding-left: 32px;
      width: calc(100% - 200px);
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
  // 进度
  .progress {
    height: 100%;
    .content {
      padding: 16px;
    }
    .item {
      margin-bottom: 16px;
    }
    .item .name {
      padding-left: 56px;
      font-size: 18px;
    }
    .item .value {
      height: 40px;
      display: flex;
      align-items: center;
    }
    .item .value span {
      width: 56px;
    }
    .item .value .el-progress {
      width: calc(100% - 56px);
    }
    .item .value .el-progress__text {
      color: #fff;
    }
    :deep(.el-progress__text) {
      color: #fff;
    }
  }
  // 学生学情
  .learning-situation {
    margin: 32px 0 16px 0;
    width: 100%;
    height: calc(200px - 16px);
    border-radius: 6px;
    .title {
      padding-left: 16px;
      height: 56px;
      line-height: 56px;
      text-align: left;
      font-size: 22px;
      // color: #000000;
      font-weight: 700;
    }
    .card-container {
      background-color: #fff;
    }
    .list {
      display: flex;
      justify-content: space-between;
      // padding: 0 16px 16px 16px;
      width: 100%;
      height: calc(100% - 56px);
    }
    .item {
      @include boder;

      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 16px;
      width: 300px;
      height: 100%;
      // background-color: rgb(0, 21, 41);
      border-radius: 6px;
    }
    .item .name {
      padding-left: 28px;
      font-size: 20px;
    }
    .item .value {
      text-align: center;
    }
    .item .value .score {
      font-size: 16px;
    }
    .item .value .num {
      font-size: 24px;
    }
    .item .value .num span {
      font-size: 34px;
    }
  }
  // 分析
  .analyze {
    display: flex;
    width: 100%;
    height: 200px;
    .list {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 100%;
    }
    .item {
      @include boder;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 22px 16px 22px 36px;
      margin-right: 16px;
      width: calc((100% - 32px) / 3);
      height: 100%;
      border-radius: 6px;
      color: #fff;
    }
    .item:last-child {
      margin-right: 0;
    }
    // .item > p:nth-child(1) {
    //   padding-left: 22px;
    // }
    // .item > p:nth-child(2) {
    //   text-align: center;
    // }
    // .item > p:nth-child(3) {
    //   text-align: right;
    //   padding-right: 22px;
    // }
    .item > p:nth-child(2) > span {
      font-size: 34px;
    }
    .item > p:nth-child(3) > span {
      font-size: 28px;
    }
    .item > :nth-child(1) {
      font-size: 20px;
    }
    .item > :nth-child(2) {
      font-size: 24px;
      font-weight: 700;
    }
    .item > :nth-child(3) {
      font-size: 18px;
    }
  }
  // 学情分析 学习计划 parent dom
  .analyze-plan {
    display: flex;
    justify-content: space-between;
    margin: 16px 0;
  }
  // 学情分析
  .situation-analyze {
    width: calc(50% - 8px);
    .main {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      padding: 16px;
    }
    .ai-content {
      min-height: 60px;
      border: 1px solid #fff;
      margin-bottom: 16px;
      padding: 16px;
    }
    .body {
      width: 100%;
      display: flex;
      justify-content: space-between;
      min-height: 200px;
    }
    .body .list {
      width: 100%;
      border-top: 1px solid #fff;
    }
    .body .list .item {
      display: flex;
      border-left: 1px solid #fff;
      border-bottom: 1px solid #fff;
    }
    .body .list .item > span {
      display: inline-block;
      line-height: 32px;
      text-align: center;
      border-right: 1px solid #fff;
    }
    .body .list .item > span:first-child {
      flex: 2;
    }
    .body .list .item > span:last-child {
      flex: 1;
    }
  }
  // 学习计划
  .learning-plan {
    width: calc(50% - 8px);
    .main {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      padding: 16px;
    }
    .plan-content,
    .ai-content {
      min-height: 60px;
      border: 1px solid #fff;
      margin-bottom: 16px;
      padding: 16px;
    }
    .body {
      width: 100%;
      min-height: 200px;
    }
    .body .list {
      width: 100%;
      border-top: 1px solid #fff;
    }
    .body .list .item {
      display: flex;
      border-left: 1px solid #fff;
      border-bottom: 1px solid #fff;
    }
    .body .list .item > span {
      display: inline-block;
      line-height: 32px;
      text-align: center;
      border-right: 1px solid #fff;
    }
    .body .list .item > span:first-child {
      flex: 1;
    }
    .body .list .item > span:last-child {
      flex: 3;
    }
  }
  :deep(.card-container) {
    @include boder;
  }
}

.echarts-dom {
  width: 100%;
  height: 100%;
}
::-webkit-scrollbar-track {
  background: transparent;
}
</style>
